<template>
  <div>
    <template v-if="loginStatus">
      <div class="breadcrumb clearfix">
        <div class="float-left">
          <span>{{breadcrumb.leaveOne}}</span>
          <span v-if="breadcrumb.leaveTwo">&gt;&nbsp;{{breadcrumb.leaveTwo}}</span>
          <span v-if="breadcrumb.leaveThree">&gt;&nbsp;{{breadcrumb.leaveThree}}</span>
        </div>
        <div class="float-right">
          <router-link :to="{name:'addCustomTopic'}">定制管理</router-link>
        </div>
      </div>
      <div class="label-list-wrap">
        <div class="label-box" :class="{'down':down}" ref="labelBox">
          <span :class="{'active':item.status}" v-for="item in labelList" @click="choose(item)">{{item.name}}</span>
        </div>
        <div class="select-more" v-if="selectMore">
          <span @click="down = !down">{{down ? '收起' : '展开更多'}}</span>
        </div>
      </div>
      <template v-for="item in content">
        <item :note="false" :content="item"></item>
      </template>
      <div class="load-more-wrap flex" >
        <template v-if="more">
          <img src="../../assets/svg/load-mord.svg" alt="" v-if="loadStatus">
          <button v-else @click="loadMore">加载更多</button>
        </template>
        <template v-else>
          <span>暂无更多数据</span>
        </template>
      </div>
    </template>
    <template v-else>
      <div class="not-login">
        <p>对不起，您还没有登录.... ^_^</p>
        <p>快点击<span @click="login">登录</span>获取更多信息</p>
      </div>
    </template>
  </div>
</template>
<script>
  import request from '../../../api/request'
  import item from '../../components/news/imgListItem'
  export default {
    name: 'custom',
    data () {
      return {
        labelList: [],
        page: 1,
        pageSize: 30,
        content: [],
        loadStatus: true,
        categoryId: '',
        keywordId: '',
        more: true, // 是否有更多数据
        down: false,
        selectMore: false
      }
    },
    components: {
      item
    },
    watch: {
      $route () {
        this.more = true
        this.page = 1
        this.content = []
        this.keywordId = ''
        if (this.loginStatus) {
          this.getChildMenu()
        }
        this.selectMore = false
      },
      loginStatus () {
        let data = {}, name = this.$route.name, id = parseInt(this.$route.params.id)
        if (name === 'alerts') {  // 蜂鸟快讯
          data.index = 0
        } else if (name === 'hot') {  // 热门话题
          data.index = 1
        } else if (name === 'subscribe') {  // 我的话题
          data.index = 2
        } else {  // 话题定制
          data.index = 3
        }
        data.id = id
        this.$store.dispatch('news/getMenue', data)
        this.getChildMenu()
      }
    },
    computed: {
      loginStatus () {
        return this.$store.state.user.loginStatus
      },
      breadcrumb () {
        return this.$store.state.news.breadcrumb
      }
    },
    created () {
      this.getChildMenu()
    },
    methods: {
      choose (data) {
        this.labelList.forEach((item) => {
          item.status = false
        })
        data.status = true
        this.$store.commit('news/saveLeaveThree', data.name)
        this.labelList.forEach((item) => {
          if (item.status) {
            this.keywordId = item.keyword_id
          }
        })
        this.more = true
        this.page = 1
        this.content = []
        this.contentReq()
      },
      loadMore () {
        this.contentReq()
      },
      getChildMenu () {
        let routerId = parseInt(this.$route.params.id), data = {category_id: routerId}
        this.categoryId = routerId
        this.loadStatus = true
        this.labelList = []
        this.page = 1
        request.get('getMyKeyword', data).then((response) => {
          if (response.data.code === '200') {
            let arr = []
            response.data.data.keywords.forEach((item, index) => {
              index ? (item.status = false) : (item.status = true)
              arr.push(item)
            })
            this.labelList = arr
            this.contentReq()
          }
        })
      },
      contentReq () {
        let contentData = {
          page: this.page,
          pageSize: this.pageSize,
          keyword_id: this.keywordId,
          category_id: this.categoryId
        }
        request.get('getKeyContent', contentData).then((response) => {
          if (response.data.code === '200') {
            console.log()
            if (this.$refs.labelBox.offsetHeight >= 68) {
              this.selectMore = true
            }
            this.content = this.content.concat(response.data.data.items)
            this.loadStatus = false
            this.page++
            if (!response.data.data.items.length) {
              this.more = false
            }
          }
        })
      },
      login () {
        this.$logPop(true).then((response) => {
          if (response.code === '200') {
            if (!response.data.inited) {  // 如果是第一次登录
              this.$store.dispatch('user/modifyLogin').then((response) => {
                if (response.code === '200') {
                  this.$router.push({name: 'subscrible'})
                }
              })
            }
          }
        })
      }
    }
  }
</script>

